<template>
  <div class="content_wrap">
    <Header />
    <div class="content">
      <el-row>
        <div style="margin: 0 auto; width: 1100px">
          <div class="swiper">
            <el-carousel :interval="5000" height="300px">
              <el-carousel-item
                v-for="(item, index) in swiperList"
                :key="item + index"
              >
                <nuxt-link
                
                  :to="'/detail/?title=' + item.title + '&id=' + item.articleId"
                >
                  <img
                    class="swiperImg"
                    :src="baseURL + item.relativePath"
                    alt
                  />
                  <div class="swiperText">{{ item.title }}</div>
                </nuxt-link>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="rexiangongzuo">
            <el-card>
              <div slot="header">
                <div style="display: inline-block">
                  <div
                    style="
                      float: left;
                      text-align: center;
                      display: inline-block;
                      font-size: 16px;
                      font-weight: bold;
                      height: 30px;
                      line-height: 30px;
                      width: 160px;
                      background-color: #dfdfdf;
                    "
                  >
                    <i class="el-icon-edit"></i> 热线工作 | News
                  </div>
                  <div class="box-styel"></div>
                </div>
                <el-button
                  style="
                    float: right;
                    padding: 3px 0;
                    margin-right: 10px;
                    line-height: 23px;
                  "
                  @click="handleMore"
                  type="text"
                  >查看更多>></el-button
                >
              </div>
              <!-- 热线工作 -->
              <div v-for="e in hotworkList" :key="e.id" class="text item">
                <div class="Anylist">
                  <nuxt-link
                   
                    :to="'/detail/?title=' + e.title + '&id=' + e.id"
                  >
                    <span style="color: red">◆</span>
                    {{ e.title | spliceString }}
                    <span style="float: right; color: rgb(152, 150, 150)">{{
                      e.createdAt
                    }}</span>
                  </nuxt-link>
                </div>
              </div>
            </el-card>
          </div>
        </div>
        <img src="~/assets/images/gongzonghao.jpg" class="index-img" />
      </el-row>
      <el-row style="margin-top: 20px">
        <div style="margin: 0 auto; width: 1100px">
          <div class="pbgoLeft" style="width: 49%; display: inline-block">
            <div class="module_re" style="height: 130px">
              <!-- <a href="/" class="module-01"></a>
                <a href="/" class="module-02"></a>
                <a href="/" class="module-03"></a>
                <a href="/" class="module-04"></a> -->
              <nuxt-link
                to="/detail?bizType=platformInfo"
                class="module-01"
              ></nuxt-link>
              <nuxt-link to="/service" class="module-02"></nuxt-link>
              <nuxt-link to="/service?active=1" class="module-03"></nuxt-link>
              <nuxt-link
                to="/detail?bizType=scope"
                class="module-04"
              ></nuxt-link>
            </div>
          </div>
          <div class="notice">
            <el-card>
              <div slot="header">
                <div style="display: inline-block">
                  <div
                    style="
                      float: left;
                      text-align: center;
                      display: inline-block;
                      font-size: 16px;
                      font-weight: bold;
                      height: 30px;
                      line-height: 30px;
                      width: 160px;
                      background-color: #dfdfdf;
                    "
                  >
                    <i class="el-icon-mic"></i> 通知公告 | Notice
                  </div>
                  <div class="box-styel"></div>
                </div>
                <el-button
                  style="
                    float: right;
                    padding: 3px 0;
                    margin-right: 10px;
                    line-height: 23px;
                  "
                  type="text"
                  @click="noticeMore"
                  >查看更多>></el-button
                >
              </div>
              <!-- 通知公告 -->
              <div v-for="e in noticeList" :key="e.id" class="text item">
                <div class="Anylist">
                  <nuxt-link
                   
                    :to="'/detail/?title=' + e.title + '&id=' + e.id"
                  >
                    <span style="color: red">◆</span>
                    {{ e.title | spliceString }}
                    <span style="float: right; color: rgb(152, 150, 150)">{{
                      e.createdAt
                    }}</span>
                  </nuxt-link>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </el-row>
      <el-row>
        <div style="margin: 20px auto; width: 1100px">
          <!-- <div class="zhishuku">
            <el-input style="width:500px;margin-top:20px;" placeholder="请输入您想查询的问题" v-model="input3" class="input-with-select">
                <el-button slot="append" icon="el-icon-search">知识库查询</el-button>
            </el-input>
            <div class="changyongci">
                常用关键词:
                <el-button v-for="(item,index) in keywords" @click="search(item)" :key="item+index" type="text">{{item}}</el-button>...
            </div>
            </div> -->
        </div>
      </el-row>
      <el-row>
        <div style="margin: 0 auto; width: 1100px" class="wparchar">
          <div class="charts" style="margin: 0 auto">
            <el-card>
              <div slot="header">
                <div style="display: inline-block">
                  <div
                    style="
                      float: left;
                      text-align: center;
                      display: inline-block;
                      font-size: 16px;
                      font-weight: bold;
                      height: 30px;
                      line-height: 30px;
                      width: 160px;
                      background-color: #dfdfdf;
                    "
                  >
                    <i class="el-icon-help"></i> 各区县受理工单数
                  </div>
                  <div class="box-styel"></div>
                </div>
              </div>
              <div
                id="main"
                style="width: 500px; height: 400px !important"
              ></div>
            </el-card>
          </div>
          <div class="charts2">
            <el-card>
              <div slot="header">
                <div style="display: inline-block">
                  <div
                    style="
                      float: left;
                      text-align: center;
                      display: inline-block;
                      font-size: 16px;
                      font-weight: bold;
                      height: 30px;
                      line-height: 30px;
                      width: 180px;
                      background-color: #dfdfdf;
                    "
                  >
                    <i class="el-icon-s-check"></i> 情况通报 | Bulletin
                  </div>
                  <div class="box-styel"></div>
                </div>
                <el-button
                  style="
                    float: right;
                    padding: 3px 0;
                    margin-right: 10px;
                    line-height: 23px;
                  "
                  type="text"
                  @click="bulletinMore"
                  >查看更多>></el-button
                >
              </div>
              <!-- 情况通报 -->
              <div v-for="e in bulletinList" :key="e.id" class="text item">
                <div class="Anylist2">
                  <nuxt-link
                   
                    :to="'/detail/?title=' + e.title + '&id=' + e.id"
                  >
                    <span style="color: red">◆</span>
                    {{ e.title | spliceString }}
                    <span style="float: right; color: rgb(152, 150, 150)">{{
                      e.createdAt
                    }}</span>
                  </nuxt-link>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </el-row>
      <el-row>
        <div style="margin: 20px auto; width: 1100px">
          <div class="rexiangongzuo2" style="width: 520px">
            <el-card>
              <div slot="header">
                <div style="display: inline-block">
                  <div
                    style="
                      float: left;
                      text-align: center;
                      display: inline-block;
                      font-size: 16px;
                      font-weight: bold;
                      height: 30px;
                      line-height: 30px;
                      width: 160px;
                      background-color: #dfdfdf;
                    "
                  >
                    <i class="el-icon-s-management"></i> 热线月报 | Report
                  </div>
                  <div class="box-styel"></div>
                </div>
                <el-button
                  style="
                    float: right;
                    padding: 3px 0;
                    margin-right: 10px;
                    line-height: 23px;
                  "
                  type="text"
                  @click="reportMore"
                  >查看更多>></el-button
                >
              </div>
                  <!-- target="_blank" -->
              <div v-for="e in reportList" :key="e.id" class="text item">
                <div class="Anylist">
                  <nuxt-link
                
                    :to="'/detail/?title=' + e.title + '&id=' + e.id"
                  >
                    <span style="color: red">◆</span>
                    {{ e.title | spliceString2 }}
                    <span style="float: right; color: rgb(152, 150, 150)">{{
                      e.createdAt
                    }}</span>
                  </nuxt-link>
                </div>
              </div>
            </el-card>
          </div>
          <div class="rexiangongzuo2" style="width: 564px; margin-left: 10px">
            <el-card>
              <div slot="header">
                <div style="display: inline-block">
                  <div
                    style="
                      float: left;
                      text-align: center;
                      display: inline-block;
                      font-size: 16px;
                      font-weight: bold;
                      height: 30px;
                      line-height: 30px;
                      width: 160px;
                      background-color: #dfdfdf;
                    "
                  >
                    <i class="el-icon-s-marketing"></i> 案件选登 | Case
                  </div>
                  <div class="box-styel"></div>
                </div>
                <el-button
                  style="
                    float: right;
                    padding: 3px 0;
                    margin-right: 10px;
                    line-height: 23px;
                  "
                  type="text"
                  @click="caseMore"
                  >查看更多>></el-button
                >
              </div>
              <div v-for="e in caseList" :key="e.id" class="text item">
                <div class="Anylist">
                  <nuxt-link
                   
                    :to="'/detail/?title=' + e.title + '&id=' + e.id"
                  >
                    <span style="color: red">◆</span>
                    {{ e.title | spliceString2 }}
                    <span style="float: right; color: rgb(152, 150, 150)">{{
                      e.createdAt
                    }}</span>
                  </nuxt-link>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </el-row>
      <el-row> </el-row>
    </div>
    <el-dialog
      title="系统维护提示"
      :visible.sync="dialogVisible"
      width="50%"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     :show-close="false"
    >
      <div class="maintain_wrap">
        <div class="maintain_wrap_title">
            系统维护更新中…… 
        </div>
        <div class="main_timer">
          维护开始时间{{MaintainObj.startDate}} -- 维护结束时间{{MaintainObj.endDate}}
        </div>

      </div>
    </el-dialog>
    <Footer />
  </div>
</template>

<script>
import JIAN from "~/assets/json/jian.json";
import Header from "~/components/Header.vue";
import Footer from "~/components/Footer.vue";
import {
  getVerifyCode,
  login2,
  getCarousel,
  hotworkData,
  publicNotic,
  queryMapData,
  getSystemMaintain
} from "@/api/user";
import global from "@/components/global";
export default {
  components: { Header, Footer },
  data() {
    return {
      baseURL: global.serverSrc,
      tabPosition: "left",
      //轮播图数组
      swiperList: [
        {
          title: "吉安12345政府服务热线...",
          img: "http://12345.nc.gov.cn/upfile/2020/04/1768638114.png",
        },
        {
          title: "吉安12345政府服务热线...",
          img: "http://12345.nc.gov.cn/upfile/2020/04/722507516.png",
        },
        {
          title: "吉安12345政府服务热线...",
          img: "http://12345.nc.gov.cn/upfile/2020/04/1735520010.png",
        },
        {
          title: "吉安12345政府服务热线...",
          img: "http://12345.nc.gov.cn/upfile/2020/04/1079259062.png",
        },
      ],
      // 热线工作文章数组
      hotworkList: [],
      // 通知公告数组
      noticeList: [],
      bulletinList: [], //情报通告
      reportList: [], //热线月报
      caseList: [], //案件选登
      keywords: ["通讯录", "居住证", "身份证", "便民劳动监察"],
      input3: "",
      activeName: "first",

      //
      dialogVisible:false, 
      MaintainObj:{
        startDate:"",
        endDate:""
      },
      //
      //模块类型
      bizType: {
        howork: "howork",
        publicNotice: "publicNotice",
        briefing: "briefing",
        hotMonReport: "hotMonReport",
        caseSelect: "caseSelect",
      },
      mapList: [],
      chartMapData: [
        { name: "吉州区", value: 0 },
        { name: "青原区", value: 0 },
        { name: "吉安县", value: 0 },
        { name: "吉水县", value: 0 },
        { name: "峡江县", value: 0 },
        { name: "新干县", value: 0 },
        { name: "永丰县", value: 0 },
        { name: "泰和县", value: 0 },
        { name: "遂川县", value: 0 },
        { name: "万安县", value: 0 },
        { name: "安福县", value: 0 },
        { name: "永新县", value: 0 },
        { name: "井冈山市", value: 0 },
      ], //echart地图
    };
  },
  mounted() {
     this.FngetSystemMaintain()
     this.getCarouselData();
    this.gethotwork();
    this.getnoticList();
    this.getbulletinList();
    this.getreportList();
    this.getcaseList();
    // this.getMapData(); 
   // this.dialogVisible = true
    // getVerifyCode({ city: "广州" })
    //   .then(res => {
    //     console.log(res);
    //   })
    //   .catch(err => {
    //     console.log(err);
    //   });
    // login2({ city: "武汉" }).then(res => console.log(res));
    // this.createTong(); // 有用
    // var chart2 = this.$echarts.init(document.getElementById("yuedu"));
    // chart2.setOption({
    //   //             title: {
    //   //     text: '某站点用户访问来源',
    //   //     subtext: '纯属虚构',
    //   //     left: 'center'
    //   // },
    //   backgroundColor: "#F3F3F3",
    //   color: ["#E062AE", "#3CB2EF", "#71F6F9", "#FFF065", "#FFAE8B"],
    //   tooltip: {
    //     trigger: "item",
    //     formatter: "{a} <br/>{b} : {c} ({d}%)"
    //   },
    //   // legend: {
    //   //     orient: 'vertical',
    //   //     left: 'left',
    //   //     data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    //   // },
    //   legend: {
    //     // icon: 'rect',
    //     itemWidth: 10,
    //     itemHeight: 10,
    //     itemGap: 10,
    //     // data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
    //     // data:[  {name:'南宁-曼芭',icon:'rect'},
    //     //         {name:'桂林-曼芭',},
    //     //         {name:'南宁-甲米',}],//分别修改legend格式
    //     right: "15%",
    //     top: "80%",
    //     textStyle: {
    //       fontSize: 12,
    //       color: "red"
    //     }
    //   },
    //   series: [
    //     {
    //       name: "详细数据",
    //       type: "pie",

    //       labelLine: {
    //         normal: {
    //           lineStyle: {
    //             color: "rgba(255, 255, 255, 0.3)"
    //           },
    //           smooth: 0.2,
    //           length: this.standSize / 50,
    //           length2: this.standSize / 100
    //         }
    //       },
    //       radius: "75%",
    //       center: ["50%", "40%"],
    //       data: [
    //         { value: 335, name: "既事既办" },
    //         { value: 310, name: "建议" },
    //         { value: 234, name: "预约" },
    //         { value: 135, name: "求助" },
    //         { value: 1548, name: "表扬" }
    //       ],
    //       emphasis: {
    //         itemStyle: {
    //           shadowBlur: 10,
    //           shadowOffsetX: 0,
    //           shadowColor: "rgba(0, 0, 0, 0.5)"
    //         }
    //       }
    //     }
    //   ]
    // });
    // // console.log(JIAN)
    // // 基于准备好的dom，初始化echarts实例
  },
  methods: {
    //退出
    // handleExit() {
    //   sessionStorage.removeItem('token')
    //   this.isLogin = false
    //   this.$router.push({
    //     path: '/'
    //   })
    // },

   //获取是否发布维护
  async FngetSystemMaintain(){
     let res = await getSystemMaintain() 
    
     if(res && res.state == 200 && res.data){
         this.MaintainObj = JSON.parse(res.data) 
         console.log(this.MaintainObj); 
         if(this.MaintainObj.maintainStatus == 1){
           this.dialogVisible = true
         }else {
           this.dialogVisible = false
         }
     }else {
       this.$message.error('网络异常')
     }
   },

    //获取轮播图数据
    async getCarouselData() {
      let res = await getCarousel({
        title: "",
        founder: "",
        pageNum: "",
        pageSize: "",
      });

      if (res && res.code == 0) {
        this.swiperList = res.data.list;
        console.log(res);
      }
    },
    //获取热线工作数据
    async gethotwork() {
      let res = await hotworkData({
        title: "",
        sourceInfo: "",
        pageNum: 1,
        pageSize: 7,
        bizType: "holwork",
      });
      if (res && res.code == 0) {
        this.hotworkList = res.data;
      }
    },
    // 获取通知公告数据
    async getnoticList() {
      let res = await publicNotic({
        title: "",
        sourceInfo: "",
        pageNum: 1,
        pageSize: 5,
        bizType: "publicNotice",
      });

      if (res && res.code == 0) {
        this.noticeList = res.data;
      }
    },
    // 获取情报通报数据
    async getbulletinList() {
      let res = await hotworkData({
        title: "",
        sourceInfo: "",
        pageNum: 1,
        pageSize: 5,
        bizType: "briefing",
      });

      if (res && res.code == 0) {
        this.bulletinList = res.data;
      }
    },
    //获取月报数据
    async getreportList() {
      let res = await hotworkData({
        title: "",
        sourceInfo: "",
        pageNum: 1,
        pageSize: 5,
        bizType: "hotMonReport",
      });

      if (res && res.code == 0) {
        this.reportList = res.data;
      }
    },
    // 获取案件选登数据
    async getcaseList() {
      let res = await hotworkData({
        title: "",
        sourceInfo: "",
        pageNum: 1,
        pageSize: 5,
        bizType: "caseSelect",
      });

      if (res && res.code == 0) {
        this.caseList = res.data;
      }
    },


    async getMapData() {
      let res = await queryMapData({});
      let that = this;
      let chartMapData = [];
      res.model &&
        res.model.forEach((item) => {
          chartMapData.push({
            name: item.regionName,
            value: item.count,
          });
        });
      this.chartMapData =
        chartMapData.length == 0 ? this.chartMapData : chartMapData;
      let huaianJson = JIAN;
      this.$echarts.registerMap("jian", huaianJson);
      var chart = this.$echarts.init(document.getElementById("main"));
      chart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c}",
        },
        visualMap: {
          min: 0,
          max: 100,
          realtime: false,
          calculable: true,
          show: false,
          inRange: {
            color: ["#5FFC05", "#DEFC05", "#FCE905", "#FC7905"],
          },
        },
        series: [
          {
            name: "",
            type: "map",
            mapType: "jian", // 自定义扩展图表类型
            label: {
              show: true,
            },
            top: 10,
            left: 10,
            right: 10,
            bottom: 10,
            data: that.chartMapData,
          },
        ],
      });
    },
    // 点击更多跳转新闻详情页 热线
    handleMore() {
      this.$router.push({ path: "/news" });
    },
    // 通告更多跳转
    noticeMore() {
      this.$router.push({ path: "/news?id=1" });
    },
    // 情报通告跳转
    bulletinMore() {
      this.$router.push({ path: "/tongbao" });
    },
    // 月报跳转
    reportMore() {
      this.$router.push({ path: "/tongbao?id=1" });
    },
    //案件选登跳转
    caseMore() {
      this.$router.push({ path: "/tongbao?id=2" });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    search(item) {
      this.input3 = item;
    },
    // createTong() {
    //   var chart3 = this.$echarts.init(document.getElementById("yuedu2"));
    //   chart3.setOption({
    //     xAxis: {
    //       type: "value",
    //       axisLabel: {
    //         formatter: value => value / 1000 + "k"
    //       }
    //     },
    //     tooltip: {
    //       trigger: "axis",
    //       axisPointer: {
    //         // 坐标轴指示器，坐标轴触发有效
    //         type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
    //       }
    //     },
    //     yAxis: {
    //       type: "category",
    //       data: [
    //         "公安",
    //         "查询",
    //         "市场监管",
    //         "社会保障",
    //         "交管",
    //         "生态环境",
    //         "医疗保险",
    //         "生育保险",
    //         "养老保险"
    //       ],
    //       axisLabel: {
    //         rotate: 40
    //       }
    //     },
    //     grid: {
    //       left: 60
    //     },
    //     series: [
    //       {
    //         name: "进件数量",
    //         barWidth: 20, //柱图宽度

    //         itemStyle: {
    //           normal: {
    //             //好，这里就是重头戏了，定义一个list，然后根据索引取得不同的值，这样就实现了，
    //             color: function (params) {
    //               // build a color map as your need.
    //               var colorList = [
    //                 "#C1232B",
    //                 "#B5C334",
    //                 "#FCCE10",
    //                 "#E87C25",
    //                 "#27727B",
    //                 "#FE8463",
    //                 "#9BCA63",
    //                 "#FAD860",
    //                 "#F3A43B",
    //                 "#60C0DD",
    //                 "#D7504B",
    //                 "#C6E579",
    //                 "#F4E001",
    //                 "#F0805A",
    //                 "#26C0C0"
    //               ];
    //               return colorList[params.dataIndex];
    //             },
    //             //以下为是否显示，显示位置和显示格式的设置了
    //             label: {
    //               show: false,
    //               position: "top",
    //               //formatter: '{c}'
    //               formatter: "{b}\n{c}"
    //             }
    //           }
    //         },
    //         data: [
    //           12000,
    //           20500,
    //           55000,
    //           80000,
    //           85112,
    //           110000,
    //           13000,
    //           15000,
    //           23000
    //         ],
    //         type: "bar",
    //         showBackground: true,
    //         backgroundStyle: {
    //           color: "#f0f8ff00"
    //         }
    //       }
    //     ]
    //   });
    // }
  },
  head() {
    return {
      title: "吉安12345政府服务热线",
      meta: [
        {
          hid: "吉安12345政府服务热线",
          name: "吉安12345政府服务热线",
          content: "吉安12345政府服务热线",
        },
      ],
    };
  },
};
</script>
<style scoped lang="scss">
.content_wrap {
  width: 100%;
  margin: 0 auto;
  .maintain_wrap {
  padding: 20px;
    height: 300px;
    border-radius: 10px;
    font-size: 16px;
    background-color:#f0f0f0;
    .maintain_wrap_title {
      padding-bottom: 40px;
     
      
      
    }
  }
  .index-img {
    display: inline-block;
    width: 120px;
    height: 120px;
    position: fixed;
    top: 335px;
    left: 50px;
    z-index: 9;
  }
  .content {
    width: 1200px;
    margin: 20px auto;
  }
}
.Anylist2 {
  /* border-bottom: 1px #ddd dotted; */
  font-size: 14px;
  margin-bottom: 21px;
}
.charts {
  margin-top: 20px auto 0px auto;
  width: 520px;
  height: 400px;
  display: inline-block;
  /* border: 1px solid red; */
}
.wparchar {
  position: relative;
}
.charts2 {
  position: absolute;
  right: 0;
  top: 0;
  margin-top: 0px;
  margin-left: 10px;
  width: 565px;
  /* min-width: 465px;
  max-width: 100px; */
  height: 400px;
  display: inline-block;
  /* border: 1px solid red; */
}
.changyongci {
  font-size: 14px;
  margin-top: 20px;
}
.zhishuku {
  text-align: center;
  margin-top: 20px;
  width: 100%;
  height: 130px;
  background: #e0e0e078;
}
.notice {
  height: 130px;
  /* border: 1px solid red; */
  display: inline-block;
  width: 556px;
}
.module_re a.module-01 {
  background: #00a651 url("../assets/images/module01.png") no-repeat center
    center;
  width: 23% !important;
}
.module_re a.module-02 {
  background: #ff8624 url("../assets/images/module02.png") no-repeat center
    center;
  width: 23% !important;
}
.module_re a.module-03 {
  background: #199fec url("../assets/images/module03.png") no-repeat center
    center;
  width: 23% !important;
}
.module_re a.module-04 {
  background: #ff735c url("../assets/images/module04.png") no-repeat center
    center;
  width: 23% !important;
}
.box-styel {
  float: left;

  width: 0px;
  height: 0;
  border-bottom: 30px solid #dfdfdf;
  border-right: 30px solid transparent;
  display: inline-block;
}
.Anylist {
  /* border-bottom: 1px #ddd dotted; */
  font-size: 14px;
  margin-bottom: 10px;
}
.rexiangongzuo {
  /* padding:10px; */
  float: right;
  font-size: 14px;
  display: inline-block;
  min-width: 520px;
  max-width: 100%;
  height: 300px;
  /* border: 1px red solid; */
}
.rexiangongzuo2 {
  /* padding:10px; */
  /* float:right; */
  font-size: 14px;
  display: inline-block;
  min-width: 520px;
  max-width: 100%;
  height: 300px;
  /* border: 1px red solid; */
}
.rexiangongzuo3 {
  /* padding:10px; */
  /* float:right; */
  font-size: 14px;
  display: inline-block;
  min-width: 620px;
  max-width: 100%;
  height: 500px;
  /* border: 1px red solid; */
}
.swiperImg {
  width: 100%;
  height: 320px;
}
.swiperText {
  position: absolute;
  left: 0;
  right: 0;
  margin-top: -90px;
  /* background: rgba(255, 255, 255, 0.1); */
  color: aliceblue;
  text-align: center;
  line-height: 40px;
  height: 40px;
  font-size: 14px;
}
.content {
  /* margin-top:20px; */
  /* width: 1200px; */
  margin: 0 auto;
  /* text-align: center; */
}
/* .content div{
  text-align: center;
} */
.swiper {
  display: inline-block;
  width: 50%;
  height: 320px;
  padding: 10px;
  border: 1px solid #999;
  /* border: 1px solid red; */
}
.module_re a {
  display: inline-block;
  width: 150px;
  height: 125px;
  /* float: left; */
  margin: 0 5px 0 0;
}
</style>
